<template>
  <div class="commentBox">
    <div class="comment">
      <div class="dividerBox">
        <div class="left">
          <span class="divider"></span>
          <span class="title">商品评论<span>(1000+)</span></span>
        </div>
        <div class="right">
          <Right />
        </div>
      </div>
      <nut-comment
        :images="cmt.images"
        :videos="cmt.videos"
        :info="cmt.info"
        @click="handleclick"
        @clickImages="clickImages"
        :operation="['replay']"
      >
        <template #comment-labels>
          <img
            class="nut-comment-header__labels--item"
            src="https://img11.360buyimg.com/imagetools/jfs/t1/211858/17/4258/12101/618e6f78Ed0edcadc/e83a673555edf59f.jpg"
          />
        </template>
      </nut-comment>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Right } from "@nutui/icons-vue";

let cmt = ref({});
const handleclick = (info) => {};
const clickImages = (imgs) => {};

// 商品评论
const remoteCommentList = () => {
  fetch("//storage.360buyimg.com/nutui/3x/comment_data.json")
    .then((response) => response.json())
    .then((res) => {
      cmt.value = res.Comment;
    })
    .catch((err) => {});
};

// 页面挂载
onMounted(() => {
  remoteCommentList();
});
</script>

<style lang="less" scoped>
.commentBox {
  margin: 5px;
  .comment {
    border-radius: 5px;
    padding: 5px 10px 15px 5px;
    background: #fff;
  }
}
</style>